<template>
	<div class="page flex">
		<div class="tarFlex flex">
			<div class="item active">总热榜</div>
			<div class="item">流行</div>
			<div class="item">民谣</div>
			<div class="item">电子</div>
			<div class="item">舞曲</div>
			<div class="item">没毛病</div>
			<div class="item">刚子</div>
		</div>
		<div class="tableFlex flex">
			<div class="item flex" v-for="(item, index) in 20">
				<div class="cardImage">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</div>
				<div class="sort flex">
					<span v-if="index > 1">#{{ index + 1 }}</span>
					<img v-else :src="`/img/top${index + 1}.webp`" />
				</div>
				<div class="music flex">
					<img src="https://api.sora13.com/images/aisora-c/120083/20240610/7d1a4341b592463f85365c7aecba38a4_0.jpg" />
					<div class="info">
						<div class="h3 ell">送给羊水之歌</div>
						<div class="desc ell">@十二</div>
					</div>
				</div>
				<div class="dateItem flex">
					<span class="iconfont icon-shijian" style="font-size: 16px;"></span>
					<span class="text ell">03:52</span>
				</div>
				<div class="dateItem flex">
					<span class="iconfont icon-xihuan" style="font-size: 17px;"></span>
					<span class="text ell">1.2W</span>
				</div>
				<div class="dateItem flex">
					<span class="iconfont icon-youyinpin" style="font-size: 16px;"></span>
					<span class="text ell">256</span>
				</div>
				<div class="play flex">
					<span class="iconfont icon-bofang2"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "热度排行榜 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		flex-direction: column;
		padding-bottom: 10px;
		.tarFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: -5px;
			.item{
				border-radius: 7px;
				margin-right: 13px;
				margin-bottom: 13px;
				font-size: 14px;
				color: rgba(224,245,255,.6);
				line-height: 33px;
				padding: 0 18px;
				background: rgba(204,221,255,.06);
				// border: 0.5px solid rgba(184,221,255,.12);
				transition: 0.2s all;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
				&.active{
					background: rgba(204,221,255,.18);
					color: #ddeaff;
				}
			}
		}
		.tableFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 5px;
			.item{
				margin-right: 13px;
				flex-direction: row;
				align-items: center;
				// border: 1px solid rgba(255,255,255,0.06);
				border-radius: 10px;
				height: 95px;
				padding: 0 22px 0 10px;
				margin-bottom: 13px;
				position: relative;
				overflow: hidden;
				.cardImage{
					height: 100%;
					left: 0;
					z-index: -2;
					padding: 1px;
					position: absolute;
					top: 0;
					width: 100%;
					.one{
						background: #506797;
						border-radius: 160.267px;
						filter: blur(120px);
						height: 244.407px;
						left: -122.5px;
						opacity: .15;
						position: absolute;
						top: -133.704px;
						width: 480px;
					}
					.two{
						border-radius: 200px;
						filter: blur(150px);
						opacity: .4;
						position: absolute;
						background: rgba(80, 103, 151, .4);
						bottom: -235.648px;
						height: 311.987px;
						right: -152.292px;
						transform: rotate(19.877deg);
						width: 311.987px;
					}
					.three{
						background: #506797;
						bottom: -83px;
						height: 160px;
						right: 277px;
						width: 262px;
						border-radius: 200px;
						filter: blur(150px);
						opacity: .2;
						position: absolute;
					}
				}
				.sort{
					width: 60px;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin-right: 5px;
					span{
						font-weight: bold;
						font-size: 15px;
						color: rgba(255,255,255,0.6);
					}
					img{
						width: 34px;
					}
				}
				.music{
					flex-direction: row;
					align-items: center;
					flex: 4;
					width: 0;
					flex-shrink: 0;
					max-width: 300px;
					margin-right: 15px;
					img{
						width: 50px;
						height: 50px;
						border-radius: 6px;
						flex-shrink: 0;
					}
					.info{
						flex: 1;
						width: 0;
						margin-left: 16px;
						.h3{
							font-size: 15px;
							color: #ddeaff;
							line-height: 1.2;
							transition: 0.2s all;
							cursor: pointer;
							&:hover{
								color: #c2d1e9;
								text-decoration: underline;
							}
						}
						.desc{
							font-size: 12px;
							color: #ddeaff;
							line-height: 1.2;
							margin-top: 5px;
							opacity: 0.7;
							transition: 0.2s all;
							cursor: pointer;
							&:hover{
								color: #c2d1e9;
								text-decoration: underline;
							}
						}
					}
				}
				.dateItem{
					max-width: 15%;
					flex-direction: row;
					align-items: center;
					width: 110px;
					margin-right: 15px;
					transition: 0.2s all;
					flex-shrink: 0;
					.iconfont{
						font-size: 15px;
						color: #ddeaff;
						opacity: 0.6;
					}
					.text{
						flex: 1;
						width: 0;
						margin-left: 6px;
						font-size: 15px;
						color: #ddeaff;
						opacity: 0.8;
					}
					&.hover:hover{
						cursor: pointer;
						.text{
							color: #c2d1e9;
							text-decoration: underline;
						}
					}
				}
				.play{
					flex-shrink: 0;
					flex: 1;
					width: 0;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					span{
						font-size: 20px;
						color: rgba(255,255,255,0.65);
						transition: 0.2s all;
						cursor: pointer;
						&:hover{
							color: rgba(255,255,255,0.95);
						}
					}
				}
				@media screen and (min-width: 1921px) {
					width: calc((100% - 13px * 2) / 3);
					&:nth-child(3n){
						margin-right: 0;
					}
				}
				@media screen and (max-width: 1920px) {
					width: calc((100% - 13px * 1) / 2);
					&:nth-child(2n){
						margin-right: 0;
					}
				}
			}
		}
	}
</style>